<template>
    <div class="shop-info">
      <div class="shop-top">
        <img :src="shop.logo" alt="">
        <span class="title">{{ shop.name }}</span>
      </div>
      <div class="shop-middle">
        <div class="shop-middle-item  shop-middle-left">
          <div class="info-sells">
            <div class="sell-count">
              {{ shop.sells | sellCountFilter }}
            </div>
            <div class="sell-text">总销量</div>
          </div>
          <div class="info-goods">
            <div class="goods-count">
              {{ shop.goodsCount }}
            </div>
            <div class="goods-text">全部宝贝</div>
          </div>
        </div>
        <div class="shop-middle-item shop-middle-right">
          <table>
            <tr v-for="(item, index) in shop.score" :key="index">
              <td>{{ item.name }}</td>
              <td class="score" :class="{'score-better':item.isBetter}">{{ item.score }}</td>
              <td class="better" :class="{'better-more':item.isBetter}"><span>{{item.isBetter?'高': '低'}}</span></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="shop-bottom">
        <div class="enter-shop">进店逛逛</div>
        <ul>
          <li>阿纳120</li>
          <li>阿纳220</li>
          <li>阿纳320</li>
          <li>阿纳420</li>
          <li>阿纳520</li>
          <li>阿纳620</li>
          <li>阿纳720</li>
          <li>阿纳820</li>
          <li>阿纳920</li>
          <li>阿纳1020</li>
          <li>阿纳1120</li>
          <li>阿纳1220</li>
          <li>阿纳1320</li>
          <li>阿纳1420</li>
          <li>阿纳1520</li>
          <li>阿纳1620</li>
          <li>阿纳1720</li>
          <li>阿纳1820</li>
          <li>阿纳1920</li>
          <li>阿纳2020</li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "DetailShopInfo",
      props:{
          shop:{
            type:Object,
            default() {
              return { };
            }
          }
      },
      filters:{
          sellCountFilter:function (value){
            if(value< 10000) return value;
            return (value/10000).toFixed(1) + '万'
          }
      }
    }
</script>

<style scoped>

  .shop-info .shop-top{height: 30px;text-align: left;margin-left: 5%;margin-top: 5%;}
  .shop-info .shop-top img{height: 100%;width: auto;}
  .shop-info .shop-top .title{margin-left: 8px;vertical-align:top;display: inline}
  .shop-info .shop-middle{display: flex;justify-content: space-between;margin-top: 40px}
  .shop-info .shop-middle .shop-middle-left, .shop-info .shop-middle .shop-middle-right{ flex: 1}
  .shop-info .shop-middle .shop-middle-left{display: flex;justify-content: space-evenly;
    border-right: 1px solid black;height: 60%;margin: auto 0}
  .shop-info .shop-middle .shop-middle-right{display: flex;justify-content: space-evenly}
  .shop-info .shop-middle .shop-middle-right .score{color: green}
  .shop-info .shop-middle .shop-middle-right .better{background: green;color: white}
  .shop-info .shop-middle .shop-middle-right .score-better{color: red}
  .shop-info .shop-middle .shop-middle-right .better-more{background-color: red;color: white}
</style>
